<template>
  <div class="introduce">
    <el-row class="introduce-auto">
      <el-col :offset="2">
        <h3 class="introduce-h3">博主介绍</h3>
      </el-col>
      <el-col :offset="2">
        <el-col :xs="12" :lg="12" :md="12" :sm="12" class="introduce-back">
          <div class="introduce-imgs">
            <img src="../../../assets/img/swiper/6.jpg" alt />
          </div>
          <div class="introduce-ps">
            <p>凌</p>
            <p>98.9.5</p>
            <p>热爱编程，热爱生活，我爱的另一半@玲</p>
            <p>每个人都有梦想</p>
            <p>或大或小</p>
            <p>我亦如此</p>
            <p>想做个在时光中慢慢盛开的人</p>
            <p>知世俗</p>
            <p>但不世故</p>
            <p>有傲骨</p>
            <p>更有慈悲</p>
            <p>见识了生活的凌厉</p>
            <p>却依然内心平静向暖</p>
            <p>曾经历过疼痛</p>
            <p>于是有了现在的光芒</p>
            <p>努力吧！打工人</p>
            <p>这个世界不会偏爱任何一个不劳而获的人</p>
            <p class="item-pp">当然它也不会辜负任何一个默默努力的人</p>
          </div>
        </el-col>
        <el-col :xs="5" :lg="5" :md="5" :sm="5" :offset="1">
          <div class="invitation">
            <div class="invitation-dii">
              <p class="invitation-p">热门的帖子</p>
              <div @click="particulars(item.id)" v-for="(item,index) in blogsData" :key="index" class="hot-blogs">
                <img class="blogs-img" :src="item.imgurl" alt />
                <div class="blogs-div">
                  <h3 class="blogs-h3">{{item.title}}</h3>
                  <p class="blogs-p">发布时间 {{item.create_time}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="game-i">
            <p class="game-p">热门的游戏</p>
            <p class="game-p1">暂无</p>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { hotBlogs } from '../../../network/blogs'
export default {
  name: 'Introduce',
  data() {
    return {
      blogsData: [],
      hotBlogss: {
        //获取热门博客
        page: 1,
        size: 6
      }
    }
  },
  created() {
    this.hotBlogs()
  },
  methods: {
    particulars(id) {
      this.$router.push({ path: `/particular/${id}` })
    },
    hotBlogs() {
      hotBlogs(this.hotBlogss.page, this.hotBlogss.size).then(res => {
        if (res.code === 200) {
          this.blogsData = res.data.rows
        }
      })
    }
  }
}
</script>

<style>
.item-pp {
  margin-bottom: 30px;
}
.introduce {
  overflow: hidden;
  background-color: #dce2da;
}
.introduce-auto {
  margin: 0 auto;
  margin-top: 80px;
}
.introduce-h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 30px;
}
.introduce-in {
  margin: 0 30px 0 30px;
}
.introduce-back {
  background-color: #f5f6f4;
  border-radius: 15px;
  box-shadow: 0px 0px 20px 10px rgba(100, 100, 100, 0.5);
  margin-bottom: 40px;
}
.introduce-imgs {
  display: block;
  width: 95%;
  height: 40%;
  margin: 0 auto;
  margin-top: 40px;
}
.introduce-imgs img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0px 0px 20px 10px rgba(188, 150, 181, 0.5);
}
.introduce-ps {
  margin: 0 auto;
  text-align: center;
}
.introduce-ps p {
  margin-top: 10px;
  font-size: 16px;
}
.introduce-ps p:nth-child(1) {
  font-size: 20px;
  font-weight: 700;
  margin-top: 20px;
}
.invitation {
  width: 450px;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 10px;
  padding-bottom: 5px;
  box-shadow: 0px 0px 20px 10px rgba(100, 100, 100, 0.5);
}
.invitation-dii {
  min-width: 500px;
  height: 100%;
}
.invitation-p {
  line-height: 80px;
  font-size: 20px;
  font-weight: 700;
  margin-left: 30px;
}
.game-i {
  width: 450px;
  height: 120px;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0px 0px 20px 10px rgba(100, 100, 100, 0.5);
  margin-top: 30px;
}
.game-p {
  line-height: 80px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.game-p1 {
  text-align: center;
}
.hot-blogs {
  display: flex;
  margin-left: 30px;
  margin-bottom: 30px;
  cursor: pointer;
}
.blogs-img {
  display: block;
  width: 130px;
  height: 80px;
  border-radius: 5px;
  box-shadow: 8px 0px 5px 0px rgba(100, 100, 100, 0.9);
}
.blogs-div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20px;
}
.blogs-h3 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 5px;
  transition: all 0.5s;
}
.blogs-h3:hover {
  color: #f67280;
}
</style>